<template>
    <div class="login">
        <!-- 头上叉叉 -->
        <div class="title">
            <div class="back" @click="router.go(-1)"></div>
        </div>
        <!-- 中间登陆文字 -->
        <div class="login-text">欢迎登陆网鱼</div>
        <!-- 账号密码 -->
        <div class="user">
            <div class="username">
                <input type="text" v-model="username" placeholder="请输入手机号">
            </div>
            <div class="password">
                <input type="text" v-model="code" placeholder="请输入验证码">
                <div v-if="isCode" @click="getPhoneCode"> 获取验证码</div>
                <div v-else>{{ count }}</div>
            </div>
        </div>
        <!-- 登陆按钮 -->
        <div v-if="username && code" class="login-btn1" @click="getLoginOk">登陆</div>
        <div v-else class="login-btn" @click="notValue">登陆</div>
        <!-- 用户协议 -->
        <div class="login-attention">
            <input type="radio">
            <p>已阅读并同意 <span>《服务协议》</span> 和<span>《用户隐私政策》</span> </p>
        </div>
        <!-- 其他方式登陆 -->
        <div class="login-bottom">
            <div></div>
            <div class="login-type">
                <p>其他登录方式</p>
                <ul>
                    <li><img class="auto-img" src="@/assets/icon/lg.png"></li>
                    <li><img class="auto-img" src="@/assets/icon/hU.png"></li>
                    <li><img class="auto-img" src="@/assets/icon/5a.png"></li>
                </ul>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { getLoginCode, getLoginSucceed } from '@/api/api'
import { showSuccessToast, showFailToast } from 'vant';
//引入pinia
import { storeToRefs } from "pinia"
//引入pinia文件
import { useAdmin } from "@/stores/counter"

//使用pinia
const store = useAdmin()  //使用公开的方法
let { userData } = storeToRefs(store)  //拿到方法里定义的值

// console.log('修改前', token.value);  //也是需要.value拿到值

//路由
let router = useRouter();

//点击获取验证码调成定时器
const isCode = ref(true)
const count = ref<any>()
const timer = ref<any>()

//手机号和验证码
const username = ref<number>()
const code = ref<number>()

function getPhoneCode() {
    let num = username.value
    if (num) {
        getLoginCode(num).then((res) => {
            showSuccessToast('已发送验证码')
            console.log('获取验证码', res);
        })
    }
    getCode()
}

function getLoginOk() {
    if (username.value && code.value) {
        // console.log('手机号', username.value, '输入的验证码', code.value);
        getLoginSucceed(username.value, code.value).then((res) => {
            if (res.data != null) {
                showSuccessToast('登陆成功')
                console.log('登陆成功', res);

                //使用本地存储保存登陆数据
                let loginInformation = res.data
                localStorage.setItem('userInfo',  JSON.stringify(loginInformation));
                
                //取
                // let lastname = JSON.parse(localStorage.userInfo);
                // console.log('lastname',lastname);
                
                //登陆成功跳转到 我的-页面
                router.push({
                    path: '/MeView'
                })
            } else {
                showFailToast('验证码不正确哦')
            }
        })
    }
}

function notValue() {
    showFailToast('请输入手机号或验证码')
}
//定时器
function getCode() {
    if (username.value) {
        const TIME_COUNT = 60;
        if (!timer.value) {
            count.value = TIME_COUNT;
            isCode.value = false;
            timer.value = setInterval(() => {
                if (count.value > 0 && count.value <= TIME_COUNT) {
                    count.value -= 1;
                } else {
                    isCode.value = true;
                    clearInterval(timer.value);
                    timer.value = null;
                }
            }, 1000);
        }
    }
}

</script>

<style lang="less" scoped>
.auto-img {
    width: 100%;
    height: 100%;
    display: block;
}

.login {
    height: 100vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 10px;

    .title {
        height: 30px;
        width: 100%;

        .back {
            width: 23px;
            height: 23px;
            background-image: url('@/assets/icon/Wm.png');
            background-size: cover;
        }
    }

    .login-text {
        padding: 45px 0;
        font-size: 20px;
        font-weight: 600;
    }

    .user {
        width: 100%;

        .username {
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;

            input {
                width: 100%;
                height: 100%;
                font-size: 15px;
                background: none;
                outline: none;
                border: none;
            }

            ::-webkit-input-placeholder {
                /* WebKit browsers，webkit内核浏览器 */
                color: #ccc;
                font-size: 13px;
            }
        }

        .password {
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            display: flex;
            align-items: center;

            input {
                width: 80%;
                height: 100%;
                background: none;
                outline: none;
                border: none;
            }

            ::-webkit-input-placeholder {
                /* WebKit browsers，webkit内核浏览器 */
                color: #ccc;
                font-size: 13px;
            }

            div {
                width: 20%;
                font-size: 12px;
                color: #868686;
            }

        }
    }

    .login-btn {
        height: 35px;
        width: 100%;
        color: white;
        font-size: 13px;
        border-radius: 3px;
        background-color: #bdc4ef;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px 0;
    }

    .login-btn1 {
        height: 35px;
        width: 100%;
        color: white;
        font-size: 13px;
        border-radius: 3px;
        background-color: #7685e1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px 0;
    }

    .login-attention {
        display: flex;
        align-items: center;
        color: #868686;

        input {
            border-radius: 999px;
            width: 15px;
            height: 15px;
            margin-right: 3px;
        }

        p {
            font-size: 12px;

            span {
                color: #bdc4ef;
            }
        }
    }

    .login-type {
        padding: 30px 0;

        p {
            color: #b8b8b8;
            font-size: 12px;
            width: 120px;
            text-align: center;
            padding: 5px 0;
        }

        ul {
            display: flex;
            justify-content: space-between;

            li {
                width: 25px;
                height: 25px;
                border-radius: 999px;
                background-color: #868686;
            }
        }
    }

    .login-bottom {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
</style>